<template>
  <div class="box">
    <header>
      <van-sticky>
        <van-nav-bar title="患者案例详情" left-arrow @click-left="onClickLeft">
          <template #right>
            <svg @click="showPopup"
              t="1734316255094"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5319"
              width="70"
              height="70"
            >
              <path
                d="M512 42.666667a32 32 0 0 1 0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333a32 32 0 0 1 64 0c0 259.2-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m233.685333 119.466666l2.282667 2.069334 90.496 90.496a32 32 0 0 1 2.090667 42.986666l-2.090667 2.282667-90.496 90.496a32 32 0 0 1-47.338667-42.965333l2.069334-2.282667 35.882666-35.882667H661.333333a138.666667 138.666667 0 0 0-138.581333 133.696L522.666667 448v128a32 32 0 0 1-63.850667 3.072L458.666667 576v-128a202.666667 202.666667 0 0 1 196.906666-202.581333L661.333333 245.333333h77.248l-35.882666-35.882666a32 32 0 0 1-2.069334-42.965334l2.069334-2.282666a32 32 0 0 1 42.986666-2.090667z"
                fill="#111111"
                p-id="5320"
                data-spm-anchor-id="a313x.search_index.0.i1.551d3a81c7R6GJ"
              ></path>
            </svg>
          </template>
        </van-nav-bar>
      </van-sticky>
    </header>
    <main>
      <div>
        <span class="prompt"
          >重要提示：本内容不能作为治疗依据，如有不适请到医院进行科学治疗</span
        >
      </div>
      <div class="title">{{ item.title }}</div>
      <div class="content">
        <div>
          <img class="avatar" :src="item.avatar" alt="" />
        </div>
        <div class="headTopRight">
          <div class="headname">
            <span class="name">{{ item.name }}</span>
            <span class="position">{{ item.type }}</span>
          </div>
          <div class="headaddr">
            <span>首都医科大学宣武医院</span>
          </div>
        </div>
      </div>
      <div class="al">
        <span class="alTitle">{{ item.cases }}</span>
        <span class="jbbk">疾病百科></span>
      </div>
      <div class="bz">
        <div class="bzOne">
          <div class="bz1">疾病</div>
          <div class="bz3">{{ item.cases }}</div>
        </div>
        <div class="bzTwo">
          <div class="bz2">症状</div>
          <div class="bz4">{{ item.content[0].ltte }}</div>
        </div>
      </div>
      <div class="info" v-for="(i, n) in item.content" :key="n">
        <span class="infoTitle">{{ i.ltte }}</span>
        <img class="infoImg" :src="i.img" alt="" />
        <span class="infoCpap">{{ i.cpap }}</span>
      </div>
      <div class="comment"></div>
    </main>
    <footer>
      <!-- 富文本编辑器 -->

      <!-- 收藏按钮 -->
      <div @click="star(item)">
        <van-icon :color="item.collectstate ? 'red' : '#eee'" name="star" />
        <p>收藏</p>
      </div>
      <div @click="like(item)">
        <van-icon :color="item.praisestate ? 'red' : '#eee'" name="like" />
        <p>{{ item.praise }}</p>
      </div>
      <div @click="showPopup">
        <van-icon color="#a0a0a0" name="share-o" />
        <p>分享</p>
      </div>
    </footer>
    <van-popup
      v-model:show="showBottom"
      round
      position="bottom"
      :style="{ height: '30%', background: 'rgb(215, 220, 220' }"
    >
      <div class="fx">
        <span>— 分享至 —</span>
      </div>
      <div class="tx">
        <div class="wx">
          <div class="wxt">
            <img src="../../assets/guahao_img/微信.png" alt="" @click="shareToWeChat()" />
          </div>
          <div class="wxz">微信好友</div>
        </div>
        <div class="pyq">
          <div class="pyqt">
            <img
              src="../../assets/guahao_img/微博.png"
              alt=""
              @click="shareToMicroblog()"
            />
          </div>
          <div class="pyqz">微博</div>
        </div>
        <div class="QQ">
          <div class="QQT">
            <img
              src="../../assets/guahao_img/QQ空间.png"
              alt=""
              @click="shareToQQRom()"
            />
          </div>
          <div class="QQZ">QQ空间</div>
        </div>
      </div>
      <button @click="showBottom = false">取消</button>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import "../caseDetail/index.css";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import axios from "../../utils/index";
import "vant/lib/toast/style";
import { useRouter } from "vue-router";

import { showToast } from "vant";
import { showSuccessToast, showFailToast } from "vant";
const route = useRoute();
const item = ref(JSON.parse(decodeURIComponent(route.query.item)));
console.log(item);

// 点击收藏
const star = (item) => {
  axios.get("/api/collectstate?id=" + item.id).then((res) => {
    console.log(res);
    item.collectstate = res.data.data;
  });
};
// 点击喜欢
const like = (item) => {
  axios.get("/api/praisestate?id=" + item.id).then((res) => {
    console.log(res);
    item.praisestate = res.data.data;
    item.praise = res.data.numPraise;
  });
};

const router = useRouter();
const onClickLeft = () => {
  router.push("/case");
};
const showBottom = ref(false);
    const showPopup = () => {
      showBottom.value = true;
    };
</script>
<script lang="ts">
export default {
  props: ["sysInfo"], //父组件传过来的文章数据
  data() {
    return {
      shareUrl: location.href,
    };
  },
  methods: {
    /**
     * 分享到微博
     */
    shareToMicroblog() {
      //跳转地址
      window.open(
        "https://service.weibo.com/share/share.php?url=" +
          encodeURIComponent(this.shareUrl) +
          "&title=" +
          this.sysInfo
      );
    },
    /**
     * 分享到qq空间
     */
    shareToQQRom() {
      //跳转地址
      window.open(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(this.shareUrl) +
          "&title=" +
          this.sysInfo +
          "&summary=" +
          this.sysInfo
      );
    },
    /**
     * 分享到微信：需要单独画页面
     */
    shareToWeChat() {
      window.open(
        "https://wei.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(this.shareUrl) +
          "&title=" +
          this.sysInfo +
          "&summary=" +
          this.sysInfo
      );
    },
  },
};
</script>
